<template>
  <div class="Search">
    <div class="search-header">
      <div class="goback">
        <span @click="goback">&lt;&nbsp;返回</span>
      </div>
      <div class="search">
        <van-search
          v-model="SearchValue"
          placeholder="请输入搜索关键词"
          show-action
          shape="round"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <!-- 蓝色底 -->
    <div class="blue-box"></div>

    <!-- 搜索结果渲染 -->
    <div class="searchResult">
        <div class="result-box" v-for="(item,index) in resultArr" :key="index">
            <div class="result-img"><img :src="item.smallImg" alt=""></div>
            <div class="zhname">{{item.name}}</div>
            <div class="enname">{{item.enname}}</div>
            <div class="result-price">&yen;{{item.price}}</div>
        </div>
    </div>

  </div>
</template>

<script>
import BackNav from "../components/BackNav.vue";
export default {
  data() {
    return {
      SearchValue: "",
      resultArr:[]
    };
  },
  components: { BackNav },
  methods: {
    // 搜索商品接口
    Search() {
      this.axios({
        method: "get",
        url: "search",
        params: {
          name: this.SearchValue,
        },
      })
        .then((res) => {
          console.log(res);
          this.resultArr=res.data.result
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    goback() {
      this.$router.go(-1);
    },
    onSearch() {
      this.Search();
    },
  },
};
</script>

<style lang="less" scoped>
// 搜索结果渲染
.searchResult{
    width: 355px;
    // min-height: 40px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    position: fixed;
    top:160px;
    left: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .result-box{
        width: 30%;
        // 图片
        .result-img{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .zhname{
            font-size: 16px;
            color: #666;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .enname{
            font-size: 14px;
            color: #999;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .result-price{
            font-size: 14px;
            font-weight: bold;
            margin-top: 10px;
            color: #0c34ba;
        }
    }
}

.search-header {
  display: flex;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  .goback {
    flex: 1;
    text-align: center;
    font-size: 16px;
    color: #0c34ba;
    font-weight: bold;
  }
  // & div:last-child{
  //     flex: 3;
  // }
}
/deep/.van-search {
  width: 300px;
  height: 100%;
}
// 蓝色底
.blue-box {
  width: 100%;
  height: 150px;
  background-color: #0c34ba;
}
.Search{
    min-height: 100vh;
    background-color: #f7f7f7;
}
</style>